import React, {useEffect, useState} from 'react';
import useTable from "@/cms/use/useTable";
import {deviceTypeList, memberStatusList, useCms} from "@/pages/constant";
import useFilter from "@/cms/use/useFilter";
import {Button, message, Modal, Space} from "antd";
import useAddEdit from "@/pages/devices/useAddEdit";

function Orders(props) {
    const {CmsFormItem,cmsList} = useCms({companyId:0});
    const {queryList,tableDOM} = useTable({
        columns:[
            {
                title:"加盟商",
                dataIndex:"companyId",
                render(text){
                    return cmsList.find(item=>item.value === text)?.label
                }
            },
            {
              title:"设备名称",
              dataIndex:"name"
            },
            {
                title:"操作名称",
                dataIndex:"action",
            },{
                title:"设备厂家",
                dataIndex:"deviceName",
            },{
                title:"设备类型",
                dataIndex:"type",
                render(text){
                    return deviceTypeList.find(item=>item.value === text)?.label
                }
            },{
                title:"设备状态",
                dataIndex:"status",
                render(text){
                    return text?"开启":"关闭"
                }
            }, {
                title:"操作",
                render(_,record){
                    return <Space>
                        <a onClick={()=>setOpen?setOpen(record):""}>编辑</a>
                        <a style={{color:"red"}} onClick={()=>remove(record)}>删除</a>
                    </Space>
                }
            }
        ],
        xhr:{
            query:"/api/getDeviceList"
        },
    })
    const {FilterDOM} = useFilter({
        queryList,
        list:[
            {
                label:"手机号",
                name:"phone",
            },
            {
                label:"状态",
                name:"status",
                type:"select",
                options:memberStatusList
            }
        ]
    })
    const {setOpen,ModalDOM} = useAddEdit({
        queryList,
        CmsFormItem
    })
    function remove(record){
        Modal.confirm({
            title:"确认要删除吗？",
            onOk(){
                return new Promise((resolve, reject) => {
                    ax.post("/api/deleteDevice",{
                        id:record.ID
                    }).then(res=>{
                        message.success(res.msg);
                        queryList({
                            current:1
                        });
                        resolve()
                    }).catch(err=>{
                        reject(err)
                    })
                })
            }
        })
    }
    return (
        <div>
            {FilterDOM}
            <Space>
                <Button type={"primary"} onClick={()=>setOpen(true)}>添加设备</Button>

            </Space>
            {tableDOM}
            {ModalDOM}
        </div>
    );
}

export default Orders;